<template>
  <div class="demo-image">
    <div v-for="fit in fits" :key="fit" class="block">
      <el-image style="width: 200px; height: 200px" :src="url" :fit="fit" />
    </div>
  </div>
  <h4>详情</h4>
  <el-button type="primary" class="StudyChanged" @click="StudyChange">操作</el-button>
  <el-table :data="lists" style="width: 100%">
    <el-table-column prop="studyName" label="学生姓名" />
    <el-table-column prop="Price" label="学费/元" />
    <el-table-column prop="phone" label="手机号" />
  </el-table>
  <el-table :data="lists" style="width: 100%">
    <el-table-column prop="parentName" label="家长姓名" />
    <el-table-column prop="desc" label="备注">
      <template #default="scope">
        <el-tooltip class="box-item" effect="dark" placement="bottom">
          <template #content>
            <div class="tooltip">{{ scope.row.desc }}</div>
          </template>
          <div>
            {{ scope.row.desc.substr(0, 8) + '...' }}
          </div>
        </el-tooltip>
      </template>
    </el-table-column>
    <el-table-column prop="identityCard" label="身份证" />
  </el-table>
  <!-- 操作弹窗 -->
  <el-dialog v-model="StudyChanged" title="修改学员信息" width="50%">
    <div>
      <study-changed />
    </div>
  </el-dialog>
</template>

<script>
import { getitemDetail } from '@/api/nowPage'
import StudyChanged from './component/StudyChanged.vue'
export default {
  name: 'StudyUpdata',
  data() {
    return {
      fits: ['cover'],
      url: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
      lists: [],
      StudyChanged: false
    }
  },
  methods: {
    StudyChange() {
      this.StudyChanged = !this.StudyChanged
    },
    getitemDetail() {
      getitemDetail().then(res => {
        console.log(res)
        if (res.data.code === 200) {
          // console.log(res.data.data)
          this.lists[0] = res.data.data
        }
      })
    }
  },
  created() {
    this.getitemDetail()
  },
  components: {
    StudyChanged
  }
}
</script>

<style lang="scss" scoped>
.demo-image .block {
  padding: 30px 0;
  display: flex;
  box-sizing: border-box;
}

.demo-image .block:last-child {
  border-right: none;
}

.el-image {
  margin: auto;
}

h4 {
  float: left;
}

.el-button {
  float: right;
  margin-bottom: 20px;
}
</style>
